/**
* @Author: 李晨光
* @Date: 2019/12/10
* @Version: 1.0
* @Last Modified by: 李晨光
* @Last Modified time: 2019/12/10
**/
<comment>
  # 文件预览
</comment>
<template>
  <div id="FilePreview">
    <mu-dialog width="360" transition="slide-bottom" fullscreen :open.sync="open">
      <mu-appbar color="primary" class="lan-header search-header">
        <slot name="dialog-header">
          <mu-button icon slot="left" @click="closeDialog">
            <i class="iconfont angle-left iconangle-left"></i>
            <span class="lan-header-back">返回</span>
          </mu-button>
          {{title}}
        </slot>
      </mu-appbar>
      <div
        style="width: 100%;height: calc(100% - .45rem);"
        class="ly_flex ly_flex_ali_center ly_flex_just_center"
      >
        <!--doc xls ppt-->
        <iframe
          v-if="type == 'office'"
          style="width: 100%;height: 100%;"
          :src="'https://view.officeapps.live.com/op/view.aspx?src=' + fileUrl"
          frameborder="0"
        ></iframe>
        <!--pdf-->
        <iframe
          v-if="type == 'pdf'"
          style="width: 100%;height: 100%;"
          :src="fileUrl"
          frameborder="0"
        ></iframe>
        <!--img-->
        <img v-if="type == 'image'" :src="fileUrl" alt style="width: 100%;height: auto;" />
        <!--video-->
        <iframe
          v-if="type == 'video'"
          style="width: 100%;height: 100%;"
          :src="'http://video.jiguantong.com:8089/index.html?id=1&sceneModel=Flat&video=' + encodeURIComponent(fileUrl)"
          frameborder="0"
        ></iframe>
        <div
          v-if="type == 'others'"
          style="font-size: 24px;text-align: center;color: #3d3d3d;"
        >暂不支持该格式预览</div>
      </div>
    </mu-dialog>
  </div>
</template>

<script>
export default {
  name: "FilePreview",
  components: {},
  props: {
    title: {
      type: String,
      default: "文件预览"
    },
    open: {
      type: Boolean,
      default: false
    },
    fileUrl: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      type: "others"
    };
  },
  computed: {},
  created() {},
  mounted() {},
  watch: {
    fileUrl: {
      handler(val) {
        this.getTypes(val);
      },
      immediate: true
    }
  },
  methods: {
    // 打开
    openDialog() {
      this.$emit("open", true);
    },
    // 关闭
    closeDialog() {
      this.$emit("close", true);
    },
    getTypes(url) {
      let file = url.split("/")[url.split("/").length - 1];
      let spl = file.split(".")[file.split(".").length - 1];
      if (
        spl == "xls" ||
        spl == "xlsx" ||
        spl == "doc" ||
        spl == "docx" ||
        spl == "ppt" ||
        spl == "pptx" ||
        spl == "XLS" ||
        spl == "XLSX" ||
        spl == "DOC" ||
        spl == "DOCX" ||
        spl == "PPT" ||
        spl == "PPTX"
      ) {
        this.type = "office";
      } else if (spl == "pdf") {
        this.type = "pdf";
      } else if (
        spl == "jpg" ||
        spl == "jpeg" ||
        spl == "png" ||
        spl == "JPG" ||
        spl == "JPEG" ||
        spl == "PNG"
      ) {
        this.type = "image";
      } else if (
        spl == "mp4" ||
        spl == "MP4" ||
        spl == "avi" ||
        spl == "AVI" ||
        spl == "flv" ||
        spl == "FLV" ||
        spl == "RMVB" ||
        spl == "rmvb"
      ) {
        this.type = "video";
      } else {
        this.type = "others";
      }
    }
  },
  destroyed() {}
};
</script>

<style lang="scss">
</style>
